<template>
    <fragment>
        <template v-for="(item) in menuList">
            <!-- 有次级菜单的,则展开子选项-->
            <el-submenu
                    v-if="item.children && item.children.length>0"
                    :key="item.id"
                    :index="item.id"
            >
                <template #title>
                    <i
                            :class="item.icon"
                            v-if="item.icon!=''"
                    ></i>
                    <span :class="[item.parentid==0 ?'activespan':'disactivesapn']">{{item.name}}</span>
                </template>
                <!-- 递归,实现无限级展开 -->
                <MenuTree :menuList="item.children"></MenuTree>
            </el-submenu>
            <!-- 没有次级菜单的 -->
            <el-menu-item
                    v-if="!item.children"
                    :key="item.id"
                    :index="item.url"
            >
                <div>
                    <i :class="item.icon" v-if="item.icon!=''"></i>
                    <span :class="[item.parentid==0 ?'activespan':'disactivesapn']">{{item.name}}</span>
                </div>
            </el-menu-item>
        </template>
    </fragment>
</template>

<script>
    export default {
        props: ['menuList'],
        name: 'MenuTree',
    };
</script>
